import { h, fragment } from '@knno/dom/jsx';
import { Nodes, dom } from '@knno/dom';
import SVGInsertBefore from '@mdi/svg/svg/table-row-plus-before.svg';
import SVGInsertAfter from '@mdi/svg/svg/table-row-plus-after.svg';
import SVGInsertColumnBefore from '@mdi/svg/svg/table-column-plus-before.svg';
import SVGInsertColumnAfter from '@mdi/svg/svg/table-column-plus-after.svg';
// import SVGDelete from '@mdi/svg/svg/trash-can-outline.svg';
import SVGRemoveColumn from '@mdi/svg/svg/table-column-remove.svg';
import SVGRemoveRow from '@mdi/svg/svg/table-row-remove.svg';
import SVGRemoveTable from '@mdi/svg/svg/table-remove.svg';
import SVGMerge from '@mdi/svg/svg/table-merge-cells.svg';
import SVGSplit from '@mdi/svg/svg/table-split-cell.svg';
import { popupMenu } from '../../tools/ui';
import { InlineEditor } from '../inlineEditor';
import {
	activeTableCell,
	findParent,
	getTableActiveCellPos,
	isCursorAtBegin,
	isCursorAtEnd,
	isInFirstLine,
	isInLastLine,
} from '../editor/editor';
import { DICT } from '../../dict';

export type Merge = {
	td: HTMLTableCellElement;
	row: number;
	column: number;
	rowSpan: number;
	colSpan: number;
};
export type CellInfo = {
	td: HTMLTableCellElement | null;
	row: number;
	column: number;
	colSpan: number;
	rowSpan: number;
	mergedBy?: Merge;
};
export type RowInfo = {
	tr: HTMLTableRowElement;
	cells: CellInfo[];
};

export type TableInfo = {
	table: HTMLTableElement;
	rowCount: number;
	columnCount: number;
	rows: RowInfo[];
};

export function parseTable(table: HTMLTableElement): TableInfo {
	const merges = new Map<number, Merge[]>();
	function getRowMerges(rid: number): Merge[] {
		let rowMerges = merges.get(rid);
		if (!rowMerges) {
			rowMerges = [];
			merges.set(rid, rowMerges);
		}
		return rowMerges;
	}
	const tableInfo: TableInfo = {
		table,
		rowCount: 0,
		columnCount: 0,
		rows: [],
	};
	[...table.rows].forEach((r, rid) => {
		const rowMerges = getRowMerges(rid);
		tableInfo.rowCount++;
		const row: RowInfo = {
			tr: r,
			cells: [],
		};
		tableInfo.rows.push(row);
		let cid = 0;
		[...r.cells].forEach((c) => {
			for (const m of rowMerges) {
				if (cid >= m.column && cid < m.column + m.colSpan) {
					for (; cid < m.column + m.colSpan; cid++) {
						const vCell: CellInfo = {
							td: null,
							row: rid,
							column: cid,
							colSpan: 1,
							rowSpan: 1,
							mergedBy: m,
						};
						row.cells.push(vCell);
					}
				}
			}
			const cell: CellInfo = {
				td: c,
				row: rid,
				column: cid++,
				colSpan: c.colSpan,
				rowSpan: c.rowSpan,
			};
			row.cells.push(cell);
			if (cell.rowSpan > 1 || cell.colSpan > 1) {
				const merge = { ...cell } as Merge;
				for (let i = merge.row; i < merge.row + merge.rowSpan; i++) {
					const rowMerges = getRowMerges(i);
					rowMerges.push(merge);
				}
			}
			for (let i = 1; i < cell.colSpan; i++) {
				const vCell: CellInfo = {
					td: null,
					row: rid,
					column: cid++,
					colSpan: 1,
					rowSpan: 1,
					mergedBy: { ...cell } as Merge,
				};
				row.cells.push(vCell);
			}
		});
		if (cid > tableInfo.columnCount) {
			tableInfo.columnCount = cid;
		}
	});
	tableInfo.rows.forEach((r, rid) => {
		const cellSize = r.cells.length;
		const rowMerges = getRowMerges(rid);
		for (let i = 0; i < tableInfo.columnCount - cellSize; i++) {
			const cid = cellSize + i;
			const vCell: CellInfo = {
				td: null,
				row: rid,
				column: cid,
				colSpan: 1,
				rowSpan: 1,
			};
			for (const m of rowMerges) {
				if (cid >= m.column && cid < m.column + m.colSpan) {
					vCell.mergedBy = m;
					break;
				}
			}
			r.cells.push(vCell);
		}
	});
	return tableInfo;
}

export function getCellInfo(tableInfo: TableInfo, td: HTMLTableCellElement): CellInfo | null {
	const tr = findParent<HTMLTableRowElement>(td, 'tr');
	if (!tr) return null;
	const rInfo = tableInfo.rows.find((row) => row.tr === tr);
	if (!rInfo) return null;
	return rInfo.cells.find((cell) => cell.td === td) ?? null;
}

export function canDeleteRow(tableInfo: TableInfo, td: HTMLTableCellElement): boolean {
	if (tableInfo.rowCount > 1) {
		return !!getCellInfo(tableInfo, td);
	} else {
		return false;
	}
}

export function activeCell(table: HTMLTableElement, rid: number, cid: number) {
	const tableInfo = parseTable(table);
	if (rid >= tableInfo.rowCount) rid = -1;
	if (cid >= tableInfo.columnCount) cid = -1;
	const current = tableInfo.rows.at(rid)?.cells?.at(cid);
	if (current) {
		const currentTd = current.td ?? current.mergedBy?.td;
		if (currentTd) {
			const selection = window.getSelection();
			const range = document.createRange();
			range.selectNodeContents(currentTd);
			range.collapse(false);
			selection?.removeAllRanges();
			selection?.addRange(range);
		}
	}
}

export function deleteRow(tableInfo: TableInfo, td: HTMLTableCellElement): void {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return;
	const needUnmergedTds = tableInfo.rows[cell.row].cells
		.filter((cell) => cell.td && (cell.rowSpan > 1 || cell.colSpan > 1))
		.map((cell) => cell.td as HTMLTableCellElement);
	needUnmergedTds.forEach((d) => {
		tableInfo = unmergeCells(tableInfo, [d]);
	});
	const shrinked = new Set<HTMLTableCellElement>();
	tableInfo.rows[cell.row].cells.forEach((c) => {
		if (c.mergedBy && c.mergedBy.rowSpan > 1 && !shrinked.has(c.mergedBy.td)) {
			c.mergedBy.td.rowSpan--;
			shrinked.add(c.mergedBy.td);
		}
	});
	const parent = tableInfo.rows[cell.row].tr.parentElement;
	parent?.removeChild(tableInfo.rows[cell.row].tr);
	activeCell(tableInfo.table, cell.row, cell.column);
}

export function canDeleteColumn(tableInfo: TableInfo, td: HTMLTableCellElement): boolean {
	if (tableInfo.columnCount > 1) {
		return !!getCellInfo(tableInfo, td);
	} else {
		return false;
	}
}

export function isMergedCell(tableInfo: TableInfo, td: HTMLTableCellElement): boolean {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return false;
	return cell.colSpan > 1 || cell.rowSpan > 1;
}

export function deleteColumn(tableInfo: TableInfo, td: HTMLTableCellElement): void {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return;
	const columnWidth = getAllColumnWidth(tableInfo);
	const needUnmergedTds = tableInfo.rows
		.filter((row) => row.cells[cell.column].td)
		.map((row) => row.cells[cell.column].td as HTMLTableCellElement);
	needUnmergedTds.forEach((d) => {
		tableInfo = unmergeCells(tableInfo, [d]);
	});
	const shrinked = new Set<HTMLTableCellElement>();
	tableInfo.rows.forEach((row) => {
		const c = row.cells[cell.column];
		if (c.mergedBy && c.mergedBy.colSpan > 1 && !shrinked.has(c.mergedBy.td)) {
			c.mergedBy.td.colSpan--;
			shrinked.add(c.mergedBy.td);
		}
	});
	tableInfo.rows.forEach((row) => {
		const d = row.cells[cell.column].td;
		if (d) {
			const parent = d.parentElement;
			parent?.removeChild(d);
		}
	});
	columnWidth.splice(cell.column, 1);
	tableInfo = parseTable(tableInfo.table);
	setAllColumnWidth(tableInfo, columnWidth);
	activeCell(tableInfo.table, cell.row, cell.column);
}

export function canInsertRow(tableInfo: TableInfo, td: HTMLTableCellElement): boolean {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return false;
	return tableInfo.rowCount < 100;
}

export function insertRowBefore(tableInfo: TableInfo, td: HTMLTableCellElement): void {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return;
	const tr = tableInfo.table.insertRow(cell.row);
	const extended = new Set<HTMLTableCellElement>();
	tableInfo.rows[cell.row].cells.forEach((c) => {
		if (c.mergedBy && c.mergedBy.row != cell.row) {
			if (!extended.has(c.mergedBy.td)) {
				c.mergedBy.td.rowSpan++;
				extended.add(c.mergedBy.td);
			}
		} else {
			if (c.td) {
				const td = tr.insertCell(-1);
				td.innerHTML = '<br>';
				td.colSpan = c.colSpan;
			}
		}
	});
	activeCell(tableInfo.table, cell.row, cell.column);
}

export function insertRowAfter(tableInfo: TableInfo, td: HTMLTableCellElement): void {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return;
	const rid = cell.row + cell.rowSpan - 1;
	const tr = tableInfo.table.insertRow(rid + 1 < tableInfo.rowCount ? rid + 1 : -1);
	const extended = new Set<HTMLTableCellElement>();
	tableInfo.rows[rid].cells.forEach((c) => {
		if (c.mergedBy) {
			if (c.mergedBy.row !== c.row) {
				if (c.mergedBy.row + c.mergedBy.rowSpan > rid + 1) {
					if (!extended.has(c.mergedBy.td)) {
						c.mergedBy.td.rowSpan++;
						extended.add(c.mergedBy.td);
					}
				} else {
					if (c.mergedBy.column === c.column) {
						const td = tr.insertCell(-1);
						td.innerHTML = '<br>';
						td.colSpan = c.mergedBy.colSpan;
					}
				}
			}
		} else {
			if (c.td) {
				if (c.rowSpan > 1) {
					c.td.rowSpan++;
				} else {
					const td = tr.insertCell(-1);
					td.innerHTML = '<br>';
					td.colSpan = c.colSpan;
				}
			} else {
				if (!c.mergedBy) {
					const td = tr.insertCell(-1);
					td.innerHTML = '<br>';
					td.colSpan = c.colSpan;
				}
			}
		}
	});
	activeCell(tableInfo.table, cell.row + 1, cell.column);
}

export function canInsertColumn(tableInfo: TableInfo, td: HTMLTableCellElement): boolean {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return false;
	return tableInfo.columnCount < 10;
}

function getColumnWidth(tableInfo: TableInfo, column: number): number {
	for (let rid = 0; rid < tableInfo.rows.length; rid++) {
		const cellInfo = tableInfo.rows[rid].cells[column];
		if (cellInfo.td && cellInfo.colSpan === 1) {
			return cellInfo.td.offsetWidth;
		}
	}
	return tableInfo.table.offsetWidth / tableInfo.columnCount;
}

export function getAllColumnWidth(tableInfo: TableInfo): number[] {
	return new Array(tableInfo.columnCount).fill(0).map((_, idx) => getColumnWidth(tableInfo, idx));
}

export function setAllColumnWidth(tableInfo: TableInfo, width: number[]) {
	const total = width.reduce((total, v) => total + v, 0);
	tableInfo.rows.forEach((row) => {
		row.cells.forEach((cell) => {
			if (cell.td) {
				const w = width.filter((_, i) => i >= cell.column && i < cell.column + cell.colSpan).reduce((p, v) => p + v, 0);
				const precent = Math.round((w / total) * 10000) / 100 + '%';
				cell.td.style.width = precent;
			}
		});
	});
}

export function insertColumnBefore(tableInfo: TableInfo, td: HTMLTableCellElement): void {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return;
	const columnWidth = getAllColumnWidth(tableInfo);
	const defaultWidth = tableInfo.table.offsetWidth / tableInfo.columnCount;
	const extended = new Set<HTMLTableCellElement>();
	tableInfo.rows.forEach((row) => {
		const c = row.cells[cell.column];
		if (c.mergedBy && c.mergedBy.column != cell.column) {
			if (!extended.has(c.mergedBy.td)) {
				c.mergedBy.td.colSpan++;
				extended.add(c.mergedBy.td);
			}
		} else {
			if (c.td) {
				const cid = row.cells.filter((c) => c.column < cell.column && c.td).length;
				const td = row.tr.insertCell(cid);
				td.innerHTML = '<br>';
				td.rowSpan = c.rowSpan;
			}
		}
	});
	columnWidth.splice(cell.column, 0, defaultWidth);
	tableInfo = parseTable(tableInfo.table);
	setAllColumnWidth(tableInfo, columnWidth);
	activeCell(tableInfo.table, cell.row, cell.column);
}

export function insertColumnAfter(tableInfo: TableInfo, td: HTMLTableCellElement): void {
	const cell = getCellInfo(tableInfo, td);
	if (!cell) return;
	const columnWidth = getAllColumnWidth(tableInfo);
	const defaultWidth = tableInfo.table.offsetWidth / tableInfo.columnCount;
	const cid = cell.column + cell.colSpan - 1;
	const extended = new Set<HTMLTableCellElement>();
	tableInfo.rows.forEach((row) => {
		const c = row.cells[cid];
		const idx = row.cells.filter((c) => c.column < cell.column && c.td).length + 1;
		if (c.mergedBy) {
			if (c.mergedBy.column !== c.column) {
				if (c.mergedBy.column + c.mergedBy.colSpan > cid + 1) {
					if (!extended.has(c.mergedBy.td)) {
						c.mergedBy.td.colSpan++;
						extended.add(c.mergedBy.td);
					}
				} else {
					if (c.mergedBy.row === c.row) {
						const td = row.tr.insertCell(idx < row.tr.cells.length ? idx : -1);
						td.innerHTML = '<br>';
						td.rowSpan = c.mergedBy.rowSpan;
					}
				}
			}
		} else {
			if (c.td) {
				if (c.colSpan > 1) {
					c.td.colSpan++;
				} else {
					const td = row.tr.insertCell(idx < row.tr.cells.length ? idx : -1);
					td.innerHTML = '<br>';
					td.rowSpan = c.rowSpan;
				}
			} else {
				if (!c.mergedBy) {
					const td = row.tr.insertCell(idx < row.tr.cells.length ? idx : -1);
					td.innerHTML = '<br>';
					td.rowSpan = c.rowSpan;
				}
			}
		}
	});
	columnWidth.splice(cell.column + 1, 0, defaultWidth);
	tableInfo = parseTable(tableInfo.table);
	setAllColumnWidth(tableInfo, columnWidth);
	activeCell(tableInfo.table, cell.row, cell.column + 1);
}

export function calculateCells(tableInfo: TableInfo, tds: HTMLTableCellElement[]): CellInfo[] {
	let cellInfos = tds.map((td) => getCellInfo(tableInfo, td)).filter((cell) => !!cell) as CellInfo[];
	let mergeCount = 0;
	let rid = Number.MAX_SAFE_INTEGER;
	let cid = Number.MAX_SAFE_INTEGER;
	let rlid = 0;
	let clid = 0;
	while (mergeCount != cellInfos.length) {
		mergeCount = cellInfos.length;
		cellInfos.forEach((cell) => {
			const c = cell.mergedBy ?? cell;
			if (c.row < rid) rid = c.row;
			if (c.column < cid) cid = c.column;
			if (c.row + c.rowSpan > rlid) rlid = c.row + c.rowSpan;
			if (c.column + c.colSpan > clid) clid = c.column + c.colSpan;
		});
		cellInfos = [];
		for (let r = rid; r < rlid; r++) {
			const row = tableInfo.rows[r];
			for (let c = cid; c < clid; c++) {
				cellInfos.push(row.cells[c]);
			}
		}
	}
	return cellInfos;
}

export function mergeCells(tableInfo: TableInfo, tds: HTMLTableCellElement[]): TableInfo {
	const cellInfos = calculateCells(tableInfo, tds);
	const columnWidth = getAllColumnWidth(tableInfo);
	cellInfos.forEach((cell, i) => {
		if (i === 0) {
			if (cell.td) {
				const last = cellInfos.at(-1) as CellInfo;
				cell.td.colSpan = last.column - cell.column + 1;
				cell.td.rowSpan = last.row - cell.row + 1;
			}
		} else {
			if (cell.td) {
				cell.td.parentElement?.removeChild(cell.td);
			}
		}
	});
	tableInfo = parseTable(tableInfo.table);
	setAllColumnWidth(tableInfo, columnWidth);
	return tableInfo;
}

export function unmergeCells(tableInfo: TableInfo, tds: HTMLTableCellElement[]): TableInfo {
	const columnWidth = getAllColumnWidth(tableInfo);
	const cellInfos = calculateCells(tableInfo, tds).filter((cell) => cell.td && (cell.colSpan > 1 || cell.rowSpan > 1));
	cellInfos.forEach((cell) => {
		for (let r = cell.row; r < cell.row + cell.rowSpan; r++) {
			const cid = tableInfo.rows[cell.row].cells.filter((c) => c.column < cell.column && c.td).length;
			const row = tableInfo.rows[r];
			for (let c = cell.column; c < cell.column + cell.colSpan; c++) {
				if (r === cell.row && c === cell.column) {
					if (cell.td) {
						cell.td.colSpan = 1;
						cell.td.rowSpan = 1;
					}
				} else if (r === cell.row) {
					const td = row.tr.insertCell(cid + 1 >= row.tr.cells.length ? -1 : cid + 1);
					td.innerHTML = '<br>';
				} else {
					const td = row.tr.insertCell(cid >= row.tr.cells.length ? -1 : cid);
					td.innerHTML = '<br>';
				}
			}
		}
	});
	tableInfo = parseTable(tableInfo.table);
	setAllColumnWidth(tableInfo, columnWidth);
	return tableInfo;
}

export function tableOnContextMenuMultipleCells(
	editor: InlineEditor,
	cells: CellInfo[],
	evt: MouseEvent,
	onFinished: () => void
) {
	const tds = cells.filter((c) => c.td).map((c) => c.td as HTMLTableCellElement);
	if (tds.length < 1) return;
	if (tds.length > 1) {
		const menu = [];
		menu.push({ icon: SVGMerge, value: DICT.mergeCells });
		if (cells.find((c) => c.colSpan > 1 || c.rowSpan > 1)) {
			menu.push({ icon: SVGSplit, value: DICT.undoMergeCells });
		}
		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
		const tableInfo = parseTable(findParent<HTMLTableElement>(tds[0], 'table')!);
		popupMenu(
			{ refer: dom.wrap(tableInfo.table), menu, pos: { x: evt.x, y: evt.y }, width: 300, maxShowLines: 10 },
			(value) => {
				if (value === DICT.mergeCells) {
					mergeCells(tableInfo, tds);
					editor.emitChange();
					editor.refreshToolbar();
				} else if (value === DICT.undoMergeCells) {
					unmergeCells(tableInfo, tds);
					editor.emitChange();
					editor.refreshToolbar();
				}
				onFinished();
			}
		);
	} else {
		tableOnContextMenu(editor, tds[0], evt);
	}
}

export function tableOnContextMenu(editor: InlineEditor, td: HTMLTableCellElement, evt: MouseEvent) {
	const tb = findParent<HTMLTableElement>(td, 'table');
	if (!tb || !tb.parentElement) return;
	const tableInfo = parseTable(tb);
	const menu = [];
	if (canInsertRow(tableInfo, td)) {
		menu.push(
			{ icon: SVGInsertBefore, value: DICT.insertRowAbove },
			{ icon: SVGInsertAfter, value: DICT.insertRowBelow }
		);
	}
	if (canInsertColumn(tableInfo, td)) {
		menu.push(
			{ icon: SVGInsertColumnBefore, value: DICT.insertColumnLeft },
			{ icon: SVGInsertColumnAfter, value: DICT.insertColumnRight }
		);
	}
	const cellInfo = getCellInfo(tableInfo, td);
	if (cellInfo && (cellInfo.colSpan > 1 || cellInfo.rowSpan > 1)) {
		menu.push({ icon: SVGSplit, value: DICT.undoMergeCells });
	}
	if (canDeleteRow(tableInfo, td)) {
		menu.push({ icon: SVGRemoveRow, value: DICT.deleteRow });
	}
	if (canDeleteColumn(tableInfo, td)) {
		menu.push({ icon: SVGRemoveColumn, value: DICT.deleteColumn });
	}
	menu.push({ icon: SVGRemoveTable, value: DICT.deleteTable });
	popupMenu({ refer: dom.wrap(td), menu, pos: { x: evt.x, y: evt.y }, width: 300, maxShowLines: 10 }, (value) => {
		const tableInfo = parseTable(tb);
		if (value === DICT.deleteRow) {
			deleteRow(tableInfo, td);
			editor.emitChange();
			editor.refreshToolbar();
		} else if (value === DICT.deleteColumn) {
			deleteColumn(tableInfo, td);
			editor.emitChange();
			editor.refreshToolbar();
		} else if (value === DICT.insertRowAbove) {
			insertRowBefore(tableInfo, td);
			editor.emitChange();
			editor.refreshToolbar();
		} else if (value === DICT.insertRowBelow) {
			insertRowAfter(tableInfo, td);
			editor.emitChange();
			editor.refreshToolbar();
		} else if (value === DICT.insertColumnLeft) {
			insertColumnBefore(tableInfo, td);
			editor.emitChange();
			editor.refreshToolbar();
		} else if (value === DICT.insertColumnRight) {
			insertColumnAfter(tableInfo, td);
			editor.emitChange();
			editor.refreshToolbar();
		} else if (value === DICT.deleteTable) {
			editor.deleteTable(tableInfo.table);
			editor.emitChange();
			editor.refreshToolbar();
		} else if (value === DICT.undoMergeCells) {
			unmergeCells(tableInfo, [td]);
			editor.emitChange();
			editor.refreshToolbar();
		}
	});
}

export function tableOnKeyDown(editor: InlineEditor, td: HTMLTableCellElement, evt: KeyboardEvent) {
	if (evt.key === 'ArrowUp') {
		const tb = findParent<HTMLTableElement>(td, 'table');
		if (!tb) return;
		const pos = getTableActiveCellPos(tb);
		if (!pos) return;
		if (isInFirstLine(td) || isCursorAtBegin(td)) {
			evt.preventDefault();
			if (pos.row > 0) {
				activeTableCell(tb, pos.row - 1, pos.column, false);
			} else {
				activeTableCell(tb, pos.row, pos.column, true);
			}
		}
	} else if (evt.key === 'ArrowDown') {
		const tb = findParent<HTMLTableElement>(td, 'table');
		if (!tb) return;
		const pos = getTableActiveCellPos(tb);
		if (!pos) return;
		if (isInLastLine(td) || isCursorAtEnd(td)) {
			evt.preventDefault();
			if (pos.row < tb.rows.length - 1) {
				activeTableCell(tb, pos.row + 1, pos.column, true);
			} else {
				activeTableCell(tb, pos.row, pos.column, false);
			}
		}
	} else if (evt.key === 'Enter' && evt.shiftKey) {
		evt.preventDefault();
		const tb = findParent<HTMLTableElement>(td, 'table');
		if (!tb) return;
		const tableInfo = parseTable(tb);
		if (evt.altKey) {
			if (canInsertRow(tableInfo, td)) {
				insertRowBefore(tableInfo, td);
			}
		} else {
			if (canInsertRow(tableInfo, td)) {
				insertRowAfter(tableInfo, td);
			}
		}
	} else if (evt.key === 'Backspace' && evt.ctrlKey) {
		evt.preventDefault();
		const tb = findParent<HTMLTableElement>(td, 'table');
		if (!tb) return;
		const tableInfo = parseTable(tb);
		if (canDeleteRow(tableInfo, td)) {
			deleteRow(tableInfo, td);
		}
	}
}

// export function activeTableCell(table: HTMLTableElement, row: number, column: number, atBegin = false) {
// 	const cell = table.querySelector<HTMLTableCellElement>(`tr:nth-child(${row + 1})>td:nth-child(${column + 1})`);
// 	if (cell) {
// 		const range = document.createRange();
// 		range.selectNodeContents(cell);
// 		range.collapse(atBegin);
// 		setSelection(range);
// 	}
// }

export function createTable(rows: number, cols: number): Nodes {
	return (
		<>
			<table>
				{...new Array(rows).fill(0).map(() => (
					<tr>
						{...new Array(cols).fill(0).map(() => (
							<td style={{ width: 100 / cols + '%', outline: 'none' }}>
								<br />
							</td>
						))}
					</tr>
				))}
			</table>
			<p>
				<br />
			</p>
		</>
	);
}
